import { vw } from '@/common/dimensions'
import globalStyles from '@/common/styles/globalStyles'
import LazyImage from '@/components/LazyImage'
import { resultShowAtom } from '@/store/home'
import { router } from 'expo-router'
import { useAtom } from 'jotai'
import React from 'react'
import { ActivityIndicator, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'

export default function ResultShow() {
    const [resultshow, setUseResultShow] = useAtom(resultShowAtom)
    return (
        <View>
            <ScrollView style={styles.container} horizontal={true} showsHorizontalScrollIndicator={false}>
                {
                    resultshow.map(item => {
                        if (item.status === "done") {
                            return (
                                <TouchableOpacity key={item.id} onPress={()=>{router.navigate({pathname:"/preview" , params:{id:item.id}})} }>
                                    <LazyImage
                                        uri={item.result_json[0].path}
                                        style={styles.image}
                                        defaultSource={require("@/assets/common/perch.png")}
                                    />
                                </TouchableOpacity>
                            )
                        }
                        if (item.status === 'pre_wait' || item.status === 'pre_wait1' || item.status === 'wait' || item.status === 'working') {
                            return (
                                <View key={item.id}>
                                    {item.origin_img_path && (
                                        <View>
                                            <LazyImage
                                                uri={item.origin_img_path}
                                                style={styles.image}
                                                defaultSource={require("@/assets/common/perch.png")}
                                            />
                                            <View style={[styles.mask, styles.image, globalStyles.aiCenter, globalStyles.jcCenter]}>
                                                <ActivityIndicator size="small" color="#0000ff" />
                                            </View>
                                        </View>
                                    )}
                                </View>
                            )
                        }
                    })
                }
            </ScrollView>
        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        marginBottom: 12
    },
    image: {
        width: 18 * vw,
        height: 18 * vw,
        borderRadius: 12,
        marginRight: 2 * vw
    },
    mask: {
        position: "absolute",
        top: 0,
        left: 0,
        backgroundColor: "rgba(0,0,0,0.3)"
    }
})